<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <h1>网球管理系统</h1>
      </div>
      <div class="user-info">
        <span>{{ userInfo.userName || '管理员' }}</span>
        <el-button type="text" @click="logout">退出登录</el-button>
      </div>
    </header>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <el-menu
          default-active=""
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleMenuSelect"
          :router="true"
        >
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/system-management">
            <el-icon><setting /></el-icon>
            <span>系统管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="/user-management">
            <el-icon><user /></el-icon>
            <span>用户管理</span>
          </el-menu-item> -->
          <el-sub-menu index="/court-info">
            <template #title>
              <el-icon><location /></el-icon>
              <span>场地信息</span>
            </template>
            <el-menu-item index="/court-management">
              <el-icon><dish /></el-icon>
              <span>场地管理</span>
            </el-menu-item>
            <el-menu-item index="/booking-management">
              <el-icon><calendar /></el-icon>
              <span>场地预约</span>
            </el-menu-item>
            <el-menu-item index="/coach-booking">
              <el-icon><calendar /></el-icon>
              <span>教练预约</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/content-management">
            <template #title>
              <el-icon><video-camera /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="/tennis-teaching">
              <el-icon><medal /></el-icon>
              <span>网球教学</span>
            </el-menu-item>
            <el-menu-item index="/test-videos">
              <el-icon><trophy /></el-icon>
              <span>测试视频</span>
            </el-menu-item>
            <el-menu-item index="/tournament-management">
              <el-icon><trophy /></el-icon>
              <span>赛事管理</span>
            </el-menu-item>
            <el-menu-item index="/article-management">
              <el-icon><document /></el-icon>
              <span>文章管理</span>
            </el-menu-item>
            <el-menu-item index="/coach-management">
              <el-icon><user /></el-icon>
              <span>教练管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/shop-management">
            <template #title>
              <el-icon><video-camera /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/shop-product">
              <el-icon><medal /></el-icon>
              <span>商品信息</span>
            </el-menu-item>
            <el-menu-item index="/shop-order-query">
              <el-icon><document /></el-icon>
              <span>订单查询</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/statistics">
            <el-icon><document /></el-icon>
            <span>统计报表</span>
          </el-menu-item>
        </el-menu>
      </aside>
      
      <!-- 内容区域 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, User, Calendar, Dish, Document, HomeFilled, Location, VideoCamera, Medal, Trophy } from '@element-plus/icons-vue'
import { useGlobalStore } from '../store/userInfo'
import router from '../router/index'

const store = useGlobalStore()
const userInfo = computed(() => store.userInfo)

// 模拟数据
const userCount = ref(100)
const courtCount = ref(10)
const bookingCount = ref(25)
const income = ref(1250.50)

// 获取今天的日期
const today = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 退出登录
const logout = () => {
  store.token = ''
  store.userInfo = {}
  store.menus = []
  store.perms = []
  store.roles = []
  ElMessage.success('退出登录成功')
  router.push('/login')
}

// 侧边栏菜单事件
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

// 菜单选择事件
const handleMenuSelect = (index, indexPath) => {
  console.log('选择菜单:', index, indexPath)
}

// 组件挂载时检查登录状态
onMounted(() => {
  if (!store.token) {
    router.push('/login')
  }
})
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.logo h1 {
  margin: 0;
  font-size: 20px;
  color: #409eff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  background-color: #f0f2f5;
}

.dashboard {
  padding: 20px 0;
}

.welcome-message {
  margin-bottom: 30px;
  text-align: center;
}

.welcome-message h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.welcome-message p {
  margin: 0;
  color: #606266;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
</style>